<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>博客发布页</title>
    <link rel="stylesheet" th:href="@{/css/blog_issue.css}">
    <link rel="stylesheet" th:href="@{/css/common.css}">
    <script th:src="@{/js/jquery.min.js}"></script>
    <!--    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.min.js"></script>-->

    <!--    引入 editor.md 的依赖-->
    <link rel="stylesheet" th:href="@{/editor.md/css/editormd.min.css}">
    <script th:src="@{/editor.md/lib/marked.min.js}"></script>
    <script th:src="@{/editor.md/lib/prettify.min.js}"></script>
    <script th:src="@{/editor.md/editormd.min.js}"></script>
</head>
<body>
<!--登录会话状态-->
<div type="hidden" id="sessionUser" th:text="${session.USER_LOGIN_STATE?.id}"></div>

<!-- 导航栏 -->
<div class="nav">
    <img th:src="@{/image/avatar.jpg}">
    <span class="title">枸杞的博客</span>

    <!--    这个标签仅仅用于占位 ,把下面几个a 标签挤到右边-->
    <div class="spacer"></div>

    <button id="list" type="button">主页</button>
    <button id="logout" type="button">注销</button>
</div>

<!-- 编辑区的容器 -->
<div class="blog-issue-container">
    <form id="mdEditor">
        <!--    博客标题编译去-->
        <div class="title">
            <input type="text" id="title" placeholder="请输入文章标题">
            <br>
            <input type="text" id="tags" placeholder="请输入文章标签">

            <button id="submit" type="button">发布文章</button>
        </div>
        <!--    博客编译器,这里用 id 是为了和 markdown 对接-->
    </form>
    <div id="editor">
    </div>
    <script>

        let host = "http://127.0.0.1:8080";

        <!--        初始化编译器-->
        let editor = editormd("editor", {
            // 这里的尺寸必须在这设置 ，设置样式会被 editormd 自动覆盖
            width: "100%",
            // 设置编译器高度
            height: "calc(100% - 50px)",
            // 编译器中的初始内容
            markdown: "",
            // 指定 editor.md 依赖的插件路径
            path: "./editor.md/lib/",
            // 保存 HTML 到 Textarea
            saveHTMLToTextarea: true,
        })

        $("#list").click(function () {
            window.location.href = host + "/list";
        })

        $("#logout").click(function () {
            let userId = document.getElementById("sessionUser").innerText
            $.ajax({
                url: host + "/user/logout", method: "post", success: function (res) {//res为返回结果
                    if (res.code == 1) {
                        alert("注销成功")
                        window.location.href = host + "/";
                    } else {
                        alert("注销失败")
                    }
                }, error: function () {//运行错误会执行此方法
                    alert("点赞失败")
                    window.location.href = host + "/403";
                }
            })
        })

        $("#submit").click(function () {
            let userId = document.getElementById("sessionUser").innerText
            let title = document.getElementById("title").value
            let tags = document.getElementById("tags").value
            let content = editor.getHTML()
            if (userId == "" || title == "" || tags == "" || content == "") {
                alert("内容为空")
                return
            }
            let params = {
                title: title,
                content: content,
                userId: userId,
                tags: tags
            }
            $.ajax({
                url: host + "/essay/add",
                method: "post",
                data: JSON.stringify(params),
                contentType: 'application/json',
                success: function (res) {//result为返回结果
                    if (res.code == 1) {
                        alert("发布成功")
                        location.href = host + "/list"
                    } else {
                        alert("发布失败")
                    }
                },
                error: function () {//运行错误会执行此方法
                    alert("发布失败")
                }
            })
        })
    </script>
</div>
</body>
</html>
